
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
	
	.single .entry-content {width:300px !important}
	
img.category-image {display:none !important; }

	.service-card.animate-on-scroll {width:330px !important}

.single .services {background:white;}

.entry-content {
	padding-bottom: 40px;}


img.imgPageService {width:100%;}

.site-main.container.pageService h1 {margin: -220px auto 130px;
    color: white;
    text-shadow: 1px 1px grey}
h1.animate-on-scroll.pageService {margin: 0px auto 30px !important;font-size:20px;background:url(https://www.hsls.be/wp-content/uploads/2025/08/mobile.jpg);  background-size:cover;padding: 60px 0 !important;color:white;text-align:center;font-size:32px;text-shadow:1px 2px #353535}

.single .services {
    background: white;
    width: 300px !important;
    margin: 0 auto;
    padding: 0;
}

.blog .service-card.animate-on-scroll
Specificity: (0,3,0)
 {
    background: white !important;
    width: 300px !important;
    padding: 0 !important;
	 margin: 0 auto !important;}

.blog .service-card.animate-on-scroll {
	padding: 0 !important;}

.service-card img {width:300px !important}

.site-main.single {
    display: inline-block;
    width: 70%;
    background: white;
	padding: 0px !important;}
	.archiveCategorie h1 {margin-bottom:10px!important;font-size:20px !important}
	call-button {
    display: block;
	}
	h2.has-text-align-center {display:none;}
	
	.service-card img.attachment-post-thumbnail{width:300px !important}
	.service-card img {width:300px !important}
	.home main.site-main.container { background: url('https://www.hsls.be/wp-content/uploads/2025/06/iStock-625905206.jpg') no-repeat;max-width:100% !important; margin:0 !important;background-size:280% !important;background-position:top !important}

	.site-main.container h1 {
        padding-top: 10px !important;
        margin-bottom: 30px;
		margin-left: 10px;}
	
	h1.animate-on-scroll.pageService {margin: 0px auto 30px !important;font-size:20px;background:url(https://www.hsls.be/wp-content/uploads/2025/08/mobile.jpg); background-size:cover;padding: 80px 0;padding-top:40px !important;color:white;text-shadow:1px 2px #353535;padding: 40px;text-align:center;}
	
	img.imgPageService {width:300% !important;display:none;}
	.site-main.container {background-size:100%;margin:0 auto;}
	
	.hero {padding:0;}


.hero h2 {padding:20px 0 0 }
	.hero h2, .hero p {font-size:20px;text-shadow:none ;box-shadow:none;margin :10px auto;padding:0px;color:#353535 }

	    
	.menu-toggle{
	background-color: transparent;
	border: 0;
	cursor: pointer;
	float: left;
	height: 50px;
	margin-left: 10px;
	outline: 0;
	position: relative;
	width: 50px;
	span {
		left: 10px;
		top: 4px;
		&::before {
			top: -8px;
		}
		&::after {
			bottom: -8px;
		}
		&::before,
		&::after {
			content: '';
		}
	}
	span,
	span::before,
	span::after {
		display: block;
		background-color: white;
		height: 4px;
		position: absolute;
		transition: all .3s ease-in-out;
		width: 30px;
	}
	&.active {
		span {
			background-color: transparent;
			&::before,
			&::after {
				background-color: #353535;
				top: 0;
			}
			&::before {
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
		}
	}
}
    .main-content,
    .sidebar {
        flex: 1 1 100%;
    }
	
	.site-main.single {
    display:block;width:100%;
   
	}
		
.service-card {width:inherit !important}

.contact-cta a {display:block; margin-top:40px}
	.container {
		padding:0
	}
	.sidebar{display:block;width:100%;}


.btn-primary {font-size:11px;padding:15px 23px}

h1 {font-size:24px;margin:0 auto 20px}

.service-card {text-align:center;width:100%;
}
	.home h1 {padding-top:100px !important;margin-bottom:0px;font-size:28px !important;line-height:30px !important;text-align:center;padding-bottom:0px}

.site-main.container.single {width:100% !important}

.site-main.container.single h1 {padding-top:0px !important}

.blog article {width:100% !important;display:block; !important}

.service-card img {width:100% !important}

	.site-main.container.pageService .entry-content p, .site-main.container.pageService .entry-content h2{padding:0 10px}
	.site-main.container.pageService .entry-content img {width:100% !important;margin:0  auto !important;padding:0 !important}
	

	.home main {padding:0 !important;}
	.home .services {margin:0 auto;width:100%;}
	
		img.featured-image.wp-post-image {width:400px !important;display:block !important;margin : 0 auto !important}
	
	.featured-image-container {margin:0 auto !important;}
}


@media (max-width: 1024px) {
	.home h1 {padding-bottom:120px}
	
	.service-card {
		padding:20px !important; max-width:40%; display:inline-block !important; float:left !important ;}
		
		.hero h2, .hero p {color:white }	
	
}


/*pc style*/

body {background:white;}

/* Ajout animation scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.site-header {background: #353535 !important}
.attachment-post-thumbnail {width:300px;margin:0 auto;padding:0 !important}

.blog article  {width:30% !important;}
.service-list.blog {background:white !important}
.service-card img {width:330px !important;}
.service-card.animate-on-scroll {padding:0 0 20px 0}

.blog .service-card.animate-on-scroll   {background:white !important;}


.blog .service-card.animate-on-scroll a {color:inherit;font-weight:inherit}

.blog .service-card.animate-on-scroll div {
	color:#353535 !important}
.service-card.animate-on-scroll h2, .service-card.animate-on-scroll div {padding:0 20px}
.home main.site-main.container { background: url('https://www.hsls.be/wp-content/uploads/2025/06/iStock-625905206.jpg') center/cover no-repeat;max-width:100% !important; margin:0 !important}

.blog .service-card.animate-on-scroll   h2 a {color:#353535 !important;}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

strong {font-weight:500 !important}

.rdv {background:#ffb703; padding:20px; border-radius:5px;color:white;display:block;width:200px; height:auto;margin:20px auto;text-align:center;}


.home h1 {text-align:left !important;text-transform:uppercase;color:#FFB703;text-shadow:1px 1px 5px #353535;padding-top:150px !important;margin-bottom:60px;font-size:40px;margin-left:40px;text-shadow:1px 1px 2px #353535}
.service-card h4 {text-align:center;font-size:22px;}

.service-card h4 a {color:#353535}
.services h3 {text-align:center !important}
.services {border-radius:5px}
.site-main.container {background:url();background-size:cover;margin-top:0;background-repeat:no-repeat;width:100%;}

.site-main.container h1, .site-main.container {text-align:center;}
.site-main.container.single {background:none;text-align:left;}


.hero p , .hero h2{color:white ;text-shadow:1px 1px 10px #353535 ;padding-bottom:20px ;max-width:400px;margin-left:0px }
.hero p .btn-primary {text-shadow:none}

.hero p, .hero h2 {text-align:left;;margin-bottom:10px}
.single h1 {text-shadow:none;letter-spacing:-1px;text-align:left }

.featured-image-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 0px;
   
    border-radius: 8px;
	display:inline-block;float:left; margin-right:20px;
}

main.single {width:70% !important;display:inline-block !important;}

.sidebar {display:inline-block;width:30% !important;}
.single .entry-content {display:inline-block;}

.single h1 {color:#353535;padding-top:10px !important;font-size:30px}
.featured-image-container {max-height:292px;}

.single .featured-image-container {box-shadow:none;}
.single .entry-content h2{padding: 0;color:#353535 !important;}
.single .entry-content img {border-radius:0; box-shadow:none !important}
h3{padding:20px 0;}

a {text-decoration:none;color:#ffb703;font-weight:bold}
a:hover {opacity:0.5}
.featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.featured-image:hover {
    transform: scale(1.03);
}

.service-card {width:300px !important}

.container {
    display: block;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 20px;
}

.site-main.single {
    display:inline-block;width:70%;
    background: white;
    padding: 20px;
   
}

.sidebar {
    display:inline-block;width: 30%;float:right;
    background: #353535;
    padding: 0px 0px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.single .sidebar h2 {color:white;padding-top:15px !important }

.services{background:#f9f6ed}
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.post-footer {display:none;}


a#callButton {color:red !important}

.call-button {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #353535;
  color: red;
  text-align: center;
  padding: 12px 0;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  z-index: 9999;
  display: block;
}


/****/


button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

#container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dynamic-div {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border-radius: 8px;
  width: 150px;
  text-align: center;
  transition: transform 0.3s;
}

.single h1 {padding-left:20px;padding-top:40px !important}

.single h2, .single h3 {padding-top:50px !important;padding-bottom:20px !important}
.dynamic-div:hover {
  transform: scale(1.05);
}

.service-card {max-width:100% !important}

.page, .page h1{padding:40px 0;}
.page .rdv {margin:50px auto;}
a.call-button {color:white !important}

.archiveCategorie h1 {margin-bottom:60px}

.site-header {margin-top:-40px;}

	a#callButton {color:#FFB703 !important}

.single section.services {background:white !important}

.hero h2 {max-width:500px}
.single h1 {
    padding-left: 20px;
    padding-top: 40px !important;
    margin-top: -400px;
    margin-bottom: 300px;
    font-size: 40px;
	text-shadow: 1px 1px white;}

.single h2 {padding-top:10px !important}


.hero.animate-on-scroll.single {margin:-400px auto 0 ;}


.hero.animate-on-scroll.single h2 {margin:0 auto -15px;}
.hero.animate-on-scroll.single  a.btn-primary {display:block;width:300px;height:55px;margin: 20px auto 0;}










/* ----- RESET DE BASE ----- */
.menuHtml, .menuHtml ul, .menuHtml li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menuHtml {
    font-family: Arial, sans-serif;
    background: #2c3e50; /* fond du menu principal */
}

/* ----- MENU PRINCIPAL ----- */
.menuHtml > ul {
    display: flex;
    justify-content: flex-start;
    background: #2c3e50;
}

.menuHtml > ul > li {
    position: relative;
}

.menuHtml > ul > li > a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.menuHtml > ul > li > a:hover {
    background: #34495e;
}

/* ----- SOUS-MENUS ----- */
.menuHtml ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #34495e;
    min-width: 220px;
    display: none;
    z-index: 1000;
    border-radius: 0 0 6px 6px;
}

.menuHtml ul ul li {
    position: relative;
}

.menuHtml ul ul a {
    display: block;
    padding: 10px 15px;
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s ease;
}

.menuHtml ul ul a:hover {
    background: #3b536d;
    padding-left: 20px; /* petit effet de décalage */
}

/* ----- DÉROULEMENT AU SURVOL ----- */
.menuHtml ul li:hover > ul {
    display: block;
}

/* ----- SOUS-SOUS-MENUS (niveau 3 et +) ----- */
.menuHtml ul ul ul {
    top: 0;
    left: 100%;
    border-radius: 6px;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
    .menuHtml > ul {
        flex-direction: column;
    }
    .menuHtml ul ul {
        position: static;
        display: none;
        width: 100%;
    }
    .menuHtml ul li:hover > ul {
        display: block;
    }
}
